<template>
    <view>
        <!-- pages/item-info/item-info.wxml -->
        <!-- 失物信息 -->

        <view class="content">
            <view class="title">
                <view class="font">标题丨{{ item.title }}</view>
            </view>
            <swiper class="img" :indicator-dots="true" indicator-active-color="#FC4311" easing-function="linear" :autoplay="true" interval="4000" :circular="true">
                <view v-for="(item, index) in item.images" :key="index">
                    <swiper-item>
                        <image :src="item" mode="" />
                    </swiper-item>
                </view>
                <image src="/static/images/noImg.png" v-if="item.images.length=== 0" style="width: 350rpx; height: 350rpx"></image>
            </swiper>
            <view v-if="item.category == 1" class="text" style="margin-bottom: 20rpx">物体当前位置丨{{ item.location }}</view>
            <view class="text">备注丨{{ item.description }}</view>
        </view>
        <view @click="showFriendInfo()" class="user-top">
            <view class="headImg">
                <image :src="user.headImage"></image>
            </view>
            <view class="username">{{ user.nickname }}</view>
            <!-- <view class="button" wx:if="{{lose.upshot=='认领中'&&lose.callOrVx!='微信'}}" bindtap="showPop">认领</view> -->
            <!-- <view class="button1" wx:if="{{lose.upshot=='认领中'}}">拒绝联系</view> -->
            <!-- <view wx:if="{{lose.upshot=='已认领'}}" class="ok">
      <image src="../../../images/index-icon/ok.png"></image>
    </view> -->
        </view>

        <view style="display: flex; flex-direction: row">
            <view class="detail">
                <view class="title">物品详情</view>
                <view class="font1">物品类型：{{ item.tag }}</view>
                <view v-if="item.category == 1" class="font1">拾取时间：{{ item.date }}</view>
                <view v-else class="font1">丢失时间:{{ item.date }}</view>
                <view v-if="item.category == 1" class="font1">认领状态：{{ item.isSuccess == false ? '等待认领' : '已认领' }}</view>
                <view v-else class="font1">物品状态：{{ item.isSuccess == false ? '未找回' : '已找回' }}</view>
                <view class="image">
                    <image src="/static/images/xingqiu.png"></image>
                </view>
            </view>

            <button class="detail" open-type="share">
                <view class="title1">发送给朋友</view>
                <image style="width: 100rpx; height: 100rpx" src="/static/images/icons/release.png"></image>
            </button>
        </view>

        <!-- 评价详情 E -->

        <view class="appraise-user">
            <view class="possess-layout margin-layouts">
                <view class="main">
                    <view v-if="comments.length != 0" class="appraise-detail-top">评论区：共{{ comments.length }}条评论</view>
                    <view v-else class="appraise-detail-top">评论区：暂时还没有评论噢~</view>

                    <block v-for="(item, commentIndex) in comments" :key="commentIndex">
                        <view>
                            <view class="username-appraise-top">
                                <view class="username">
                                    <image :src="item.userVO.headImage"></image>
                                    <view>{{ item.userVO.nickname }}</view>
                                </view>
                                <view>
                                    <image class="praise" src="/static/images/like-active.png" :data-commentIndex="commentIndex" @tap="praiseComment"></image>
                                    <view :class="'amount ' + (item.change ? 'hover-active' : '')">{{ item.praise }}</view>
                                </view>
                            </view>
                        </view>

                        <!-- 评论内容和时间 -->

                        <view class="appraise-content" :data-index="commentIndex" @tap="clickComment">
                            <text>{{ item.content }}</text>
                            <text>{{ item.time }}</text>
                        </view>

                        <view class="reply-username">
                            <block v-if="item.replyVOList.length > 2">
                                <view :class="'reply-usernames ' + (item.isOpen ? 'reply-usernames-active' : '')">
                                    <block v-for="(reply, index2) in item.replyVOList" :key="index2">
                                        <view class="username-appraise-tops">
                                            <view class="username">
                                                <image :src="reply.userVO.headImage"></image>
                                                <view>{{ reply.userVO.nickname }}</view>
                                            </view>
                                            <view>
                                                <image
                                                    class="praise"
                                                    src="/static/images/like.png"
                                                    :data-curindex="commentIndex"
                                                    :data-curindexs="index2"
                                                    @tap="praiseThisss"
                                                ></image>
                                                <view :class="'amount ' + (item.changes ? 'hover-active' : '')">{{ item.praise }}</view>
                                            </view>
                                        </view>

                                        <view class="appraise-content">
                                            <text>{{ reply.content }}</text>
                                            <text>{{ reply.time }}</text>
                                        </view>
                                    </block>
                                </view>
                                <view class="unfold-btn" @tap="chooseUnfold" v-if="true" :data-value="item.isOpen" :data-key="'comments.[' + commentIndex + ']'">
                                    展开{{ item.replyVOList.length - 1 }}条回复
                                </view>
                            </block>

                            <block v-else>
                                <block v-for="(reply, index2) in item.replyVOList" :key="index2">
                                    <view class="username-appraise-top">
                                        <view class="username">
                                            <image :src="reply.userVO.headImage"></image>
                                            <view>{{ reply.userVO.nickname }}</view>
                                        </view>
                                        <view>
                                            <image class="praise" src="/static/images/like.png" :data-curindex="commentIndex" :data-curindexs="index2" @tap="praiseThisss"></image>
                                            <view :class="'amount ' + (item.changes ? 'hover-active' : '')">{{ item.praise }}</view>
                                        </view>
                                    </view>

                                    <view class="appraise-content">
                                        <text>{{ reply.content }}</text>
                                        <text>{{ item.time }}</text>
                                    </view>
                                </block>
                            </block>
                        </view>
                    </block>
                </view>
            </view>
        </view>

        <view class="end">- 这里就到底了哦 -</view>

        <!-- 底部评论 S -->
        <view v-if="status == true" class="appraise-btn">
            <view class="appraise-btn-left">
                <!-- <image src="../../../img/icon/icon-import.png"></image> -->
                <input :placeholder="placeholder" :value="content" type="text" @input="input" />
            </view>
            <view class="appraise-btn-right" @tap="submit">评论</view>
        </view>
        <!-- 底部评论 E -->
    </view>
</template>

<script>
// pages/item-info/item-info.js


import UNI_APP from '@/.env.js'
const baseUrl = UNI_APP.BASE_URL
export default {
    data() {
        return {
            item: {
				images:[]
			},
            user: {
                headImage: '',
                nickname: ''
            },

            comments: [],
            content: '',
            reply_content: '',
            status: true,

            //评价框显示隐藏
            placeholder: '说点什么吧~',

            isReplyComment: false,

            //回复评论
            isReplyReply: false,

            //回复别人的回复
            replyCommentIndex: 0,

            replyReplyIndex: 0,
            repotList: [],
            appraiseList: [],
            commentIndex: 0,

            reply: {
                userVO: {
                    headImage: '',
                    nickname: ''
                },

                content: '',
                time: ''
            }
        };
    },
	
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        console.log('进入失物信息详情页面');
        var that = this;
       
       uni.$on('acceptdata', function (data) {
           console.log(data.data);
                that.item=data.data.item,
                that.user= data.data.user
            that.getComment(data.data.item.id);
        });
    },
    onShareAppMessage() {
        return {
            title: '这是你的物品吗?',
            imageUrl: this.item.images[0]
        };
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
   onPullDownRefresh() {
      this.getComment()
   },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
		showFriendInfo() {
			console.log("showFriendInfo")
			uni.navigateTo({
				url: "/pages/common/user-info?id=" + this.user.id	
			})
		},
 

        input(e) {
          this.content= e.detail.value
           
        },

        getComment(id) {
			var that = this
            this.$http({
				url:baseUrl+'/comment/'+id,
				method:'GET'
			}).then((data) => {
                    console.log('查询', data,data.length);
                    var comments = [];
                    comments = data;
                    for (let i = 0; i < data.length; i++) {
                        comments[i].isOpen = false;
                    }
                    console.log("返回comments:",comments)
                that.comments= comments
				 console.log("this.comments:",that.comments)
                
                })
                .catch((err) => {
                    console.log('获取评论失败 itemid:', this.item.id);
                });
        },

        //点击按钮时得到里面的值
        submit(e) {
            var { isReplyComment, isReplyReply, content, comments, replyCommentIndex, replyReplyIndex } = this;
            if (this.content == '') {
                uni.showToast({
                    title: '内容不能为空',
                    icon: 'none',
                    duration: 1500
                });
                return;
            }
            if (isReplyComment == false && isReplyReply == false) {
                var comment = {};
                comment.content = this.content;
                comment.itemId = this.item.id;
                this.$http({
					url:baseUrl+'/user/publishComment',
					method:'POST',
					data:comment
				}).then((res) => {
                        uni.showToast({
                            title: '发布成功'
                        });
						// var comments = this.comments
						// comments.push(comment)
      //                  this.comments=comments
						this.getComment()
					})
                    .catch((err) => {
                        uni.showToast({
                            title: '发布失败，请稍后再试',
                            icon: 'none'
                        });
                    });
            } else if (isReplyComment == true && isReplyReply == false) {
                var comment = {};
                comment.content = this.content;
                comment.itemId = this.item.id;
                comment.commentId = comments[replyCommentIndex].id;
                comment.replyusername = comments[replyCommentIndex].userVO.nickname;
                comment.replyUserId = comments[replyCommentIndex].userVO.id;
                this.$http({
					url: baseUrl + '/user/replyComment',
					method:'POST',
					data:comment
				})
                    .then((res) => {
                        uni.showToast({
                            title: '发布成功'
                        });
                        this.getComment();
                    })
                    .catch((err) => {
                        uni.showToast({
                            title: '发布失败，请稍后再试',
                            icon: 'error'
                        });
                    });
            }
        },

        replyFun(e) {
            var index = 0;
            if (this.reply_content == '') {
                uni.showToast({
                    title: '内容不能为空',
                    icon: 'none',
                    duration: 1500
                });
            } else {
                var reply = {};
                reply.itemId = this.item.id;
                reply.userId = this.user.id;
                reply.replyUserId = this.comments[index].userId;
                reply.content = this.reply_content;
                publishReply(reply);
            }
        },

        clickComment(e) {
            console.log(e);
            var index = e.currentTarget.dataset.index;
            var placehodler = '回复' + this.comments[index].userVO.nickname;
            
                this.placeholder= placehodler,
                this.isReplyComment= true,
                this.replyCommentIndex=index
        
        },

        // 点赞功能逻辑
        praiseComment: function (e) {
            var index = e.currentTarget.dataset.commentIndex;
            if (this.repotList[index]) {
                var change = this.repotList[index].change;
                if (change !== undefined) {
                    var num = this.repotList[index].praise;
                    if (change) {
                        this.repotList[index].praise = num - 1;
                        this.repotList[index].change = false;
                    } else {
                        this.repotList[index].praise = num + 1;
                        this.repotList[index].change = true;
                    }
                    
                        this.repotList=this.repotList
                   
                }
            }
        },

        // 点击展开
        chooseUnfold: function (e) {
            var key = e.currentTarget.dataset.key;
            var val = e.currentTarget.dataset.value;
            key = key + '.isOpen';
         
               this.key= !val
           
        },

        // 点赞功能逻辑s
        praiseThiss: function (e) {
            var index = e.currentTarget.dataset.curindex;
            if (this.appraiseList[index]) {
                var change = this.appraiseList[index].change;
                if (change !== undefined) {
                    var num = this.appraiseList[index].praise;
                    if (change) {
                        this.appraiseList[index].praise = num - 1;
                        this.appraiseList[index].change = false;
                    } else {
                        this.appraiseList[index].praise = num + 1;
                        this.appraiseList[index].change = true;
                    }
                    
                        this.appraiseList= this.appraiseList
                 
                }
            }
        },

        // 点赞内层逻辑
        praiseThisss: function (e) {
            var index = e.currentTarget.dataset.curindex;
            var indexs = e.currentTarget.dataset.curindexs;
            console.log(indexs);
            if (this.appraiseList[index].reply_list[indexs]) {
                var change = this.appraiseList[index].reply_list[indexs].changes;
                if (change !== undefined) {
                    var num = this.appraiseList[index].reply_list[indexs].praise;
                    if (change) {
                        this.appraiseList[index].reply_list[indexs].praise = num - 1;
                        this.appraiseList[index].reply_list[indexs].changes = false;
                    } else {
                        this.appraiseList[index].reply_list[indexs].praise = num + 1;
                        this.appraiseList[index].reply_list[indexs].changes = true;
                    }
                    
                        this.appraiseList= this.appraiseList
                    
                }
            }
        }
    },
	
	
};
</script>
<style>
/* pages/item-info/item-info.wxss */

.content {
    background-color: #fff;
    border-radius: 30rpx;
    width: 90%;
    margin: 0 auto;
    margin-top: 30rpx;
    box-shadow: 0rpx 1rpx 10rpx rgba(0, 0, 0, 0.09);
    padding-bottom: 40rpx;
}
.content .title {
    width: 90%;
    font-size: 42rpx;
    margin-top: 20rpx;
    margin-left: 40rpx;
    font-weight: bold;
    /* overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis; */
}

.content .img image {
    width: 90%;
    border-radius: 30rpx;
    margin: 30rpx;
    height: 300rpx;
}
.content .text {
    margin-top: 10rpx;
    margin-left: 40rpx;
    font-size: 28rpx;
    color: rgba(0, 0, 0, 0.753);
}

/* 用户界面 */
.user-top {
    border-radius: 30rpx;
    width: 90%;
    height: 180rpx;
    background-color: #fff;
    margin: 20rpx auto;
    display: flex;
    box-shadow: 0rpx 1rpx 10rpx rgba(0, 0, 0, 0.09);
}
.user-top .headImg image {
    width: 100rpx;
    height: 100rpx;
    margin-top: 40rpx;
    margin-left: 40rpx;
    border-radius: 50%;
    border: gray 5rpx solid;
}
.user-top .username {
    font-size: 36rpx;
    margin-top: 70rpx;
    margin-left: 30rpx;
    width: 30%;
    overflow: hidden;
}

.detail {
    border-radius: 30rpx;
    background-color: #fff;
    margin: 40rpx;
    width: 300rpx;
    height: 350rpx;
    box-shadow: 0rpx 1rpx 10rpx rgba(0, 0, 0, 0.09);
}
.detail .title {
    margin-left: 30rpx;
    margin-top: 20rpx;
    color: gray;
    font-size: 38rpx;
}
.detail .title1 {
    margin-left: 30rpx;
    margin-top: 20rpx;
    color: gray;
    font-size: 38rpx;
    text-align: center;
}
.detail .font1 {
    margin-left: 30rpx;
    margin-top: 20rpx;
    color: gray;
    font-size: 28rpx;
}
.detail .image image {
    width: 120rpx;
    height: 120rpx;
    margin-left: 30rpx;
    margin-top: 15rpx;
}

.ok image {
    width: 130rpx;
    height: 130rpx;
    margin-left: 150rpx;
    margin-top: 26rpx;
}

button::after {
    border: none;
}
/* pages/commodity/commodity-write-back/index.wxss */
.margin-layout {
    background: #ffffff;
    border-bottom-left-radius: 20rpx;
    border-bottom-right-radius: 20rpx;
}

.margin-layouts {
    border-radius: 20rpx;
    background: #ffffff;
    padding-bottom: 44rpx;
}
.comment-user {
    display: flex;
    justify-content: space-between;
    font-size: 25rpx;
    height: 100rpx;
}
.user {
    height: 100rpx;
    display: flex;
    align-self: center;
}
.user-head-portrait {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    align-self: center;
    margin-right: 10rpx;
}
.user-name {
    align-self: center;
}
.appraise-date {
    align-self: center;
    color: #8a8a8a;
}
.commodity {
    width: 100%;
    height: 163rpx;
    font-size: 24rpx;
    display: flex;
    align-items: center;
    border-top: 1rpx solid #eeeeee;
    margin-bottom: 20rpx;
}
.commdoity-image {
    width: 16.53%;
    display: flex;
}
.commodity-img {
    width: 124rpx;
    height: 124rpx;
    align-self: center;
}
.commodity-title .title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    align-self: center;
    margin-right: 20rpx;
}
commdoity-image-right {
    width: 5.6%;
}
.commdoity-image-right image {
    width: 42rpx;
    height: 42rpx;
}
.commodity-line {
    -webkit-line-clamp: 2;
    opacity: 0.75;
}
.goods-price {
    margin-top: 34rpx;
    color: #f73a3f;
}
.goods-price text:nth-child(2),
.goods-price text:nth-child(3) {
    font-size: 32rpx;
}
.goods-price text:nth-child(1),
.goods-price text:nth-child(4) {
    font-size: 18rpx;
}
/* 用户评价内容 */
.appraise-user {
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
    overflow: hidden;
}
.user-comment {
    border-bottom: 1px solid #efefef;
}
.comment-user {
    display: flex;
    justify-content: space-between;
    font-size: 25rpx;
    height: 104rpx;
}

.user {
    height: 100rpx;
    display: flex;
    align-self: center;
}

.user-head-portrait {
    width: 64rpx;
    height: 64rpx;
    border-radius: 50%;
    align-self: center;
    margin-right: 10rpx;
}

.user-name {
    align-self: center;
    font-size: 20rpx;
}

.user-name view:nth-child(2) image {
    width: 14rpx;
    height: 14rpx;
}

.appraise-date {
    align-self: center;
    color: #666666;
    padding-top: 20rpx;
}

.appraise-content {
    font-size: 24rpx;
    margin: 5rpx 0 19rpx;
    padding-top: 20rpx;
}
.appraise-content view {
    line-height: 36rpx;
}
.appraise-content view text:nth-child(1) {
    color: #999999;
}
appraise-content view text:nth-child(2) {
    color: #000000;
}

.evaluate-content {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #000000;
}

.ellipsis {
    /* -webkit-line-clamp: 5; */
    opacity: 0.75;
}

.unellipsis {
    -webkit-line-clamp: 0;
    opacity: 1;
}

.content-jian {
    float: right;
}

.appraise-base {
    margin: 0 0 20rpx;
    display: flex;
    justify-content: space-between;
    font-size: 20rpx;
    height: 40rpx;
}

.scroll-view-true {
    width: 100%;
    display: flex;
    white-space: nowrap;
}
.scroll-view-true image {
    width: 230rpx;
    height: 240rpx;
    margin-right: 10rpx;
    padding-bottom: 11rpx;
}

.choice {
    color: #8a8a8a;
    align-self: center;
}

.write-back {
    display: flex;
    color: #666666;
    align-self: center;
}
.write-back view {
    display: flex;
    align-items: center;
}

.write-back view:nth-child(1) {
    margin-right: 72rpx;
}

.write-back view:nth-child(1) image {
    width: 28rpx;
    height: 25rpx;
}

.write-back view:nth-child(2) image {
    width: 27rpx;
    height: 26rpx;
}
.hover-active {
    color: #f73c41;
}
.wrte-back-img {
    width: 28rpx;
    height: 28rpx;
    align-self: center;
    margin-right: 10rpx;
}

/* 评价 */
.appraise-detail-top {
    font-size: 24rpx;
    color: #333333;
    padding: 40rpx 0 0;
}
.username-appraise-top {
    display: flex;
    justify-content: space-between;
    margin-top: 32rpx;
}
.username-appraise-tops {
    display: flex;
    justify-content: space-between;
}
.username-appraise-top view:nth-child(2),
.username-appraise-tops view:nth-child(2) {
    text-align: center;
}
.username-appraise-top .username,
.username-appraise-tops .username {
    display: flex;
    font-size: 20rpx;
    color: #666666;
}
.username-appraise-top .username image,
.username-appraise-tops .username image {
    width: 48rpx;
    height: 48rpx;
    border-radius: 50%;
    margin-right: 20rpx;
}
.username-appraise-top .praise,
.username-appraise-tops .praise {
    width: 26rpx;
    height: 26rpx;
}
.amount {
    font-size: 20rpx;
    color: #999999;
}
.appraise-content {
    margin: -40rpx 68rpx 30rpx;
}
.appraise-content text:nth-child(1) {
    font-size: 20rpx;
    line-height: 30rpx;
    color: #000000;
    margin-right: 17rpx;
}
.appraise-content text:nth-child(2) {
    font-size: 20rpx;
    color: #999999;
}
.reply-username {
    margin: 0 0 0 68rpx;
}
.reply-usernames {
    height: 80rpx;
    overflow: hidden;
    margin: 0 0 0 68rpx;
}
.reply-usernames-active {
    height: 100% !important;
}
/* 展开btn */
.unfold-btn {
    margin: 0 0 0 68rpx;
    font-size: 24rpx;
    color: #ff888c;
    font-weight: Medium;
    font-family: 'PingFang-SC-Medium';
}
/* 底部 */
.end {
    font-size: 20rpx;
    color: #999999;
    text-align: center;
    margin: 30rpx 0 151.3rpx;
}

.appraise-btn {
    height: 97.3rpx;
    background: #ffffff;
    position: fixed;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 21rpx;
}
.appraise-btn .appraise-btn-left {
    height: 64rpx;
    width: 620rpx;
    background: #eeeeee;
    border-radius: 32rpx;
    margin-right: 26rpx;
    padding-left: 5rpx;
    font-size: 24rpx;
    color: #999999;
    display: flex;
    align-items: center;
}
.appraise-btn .appraise-btn-left image {
    width: 29rpx;
    height: 22rpx;
    margin-left: 28rpx;
    margin-right: 9rpx;
}
.appraise-btn-right {
    font-size: 32rpx;
    color: #f73a3f;
}
</style>
